<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
</head>
<body>
<div id="app">
  <el-container>
    <el-header style="background-color: #0096dc">
      <h1 style="font-size: 22px;color: white">
        相册练习管理系统
        <span style="float: right">
                    欢迎回来
                </span>
      </h1>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <el-menu @select="handleSelect">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-s-flag"></i>相册管理</template>
            <el-menu-item index="1-1">相册列表</el-menu-item>
            <el-menu-item index="1-2">添加相册</el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-picture"></i>图片管理</template>
            <el-menu-item index="2-1">图片列表</el-menu-item>
            <el-menu-item index="2-2">添加图片</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
        <!--相册表格开始-->
        <el-table v-if="currentIndex=='1-1'"
                  :data="albumArr"
                  style="width: 100%">
          <el-table-column type="index" label="编号"></el-table-column>
          <!--prop=property属性 设置当前列显示的文本内容为对象的xxx属性-->
          <el-table-column prop="name" label="相册名称">
          </el-table-column>
          <el-table-column prop="description" label="相册描述">
          </el-table-column>
          <el-table-column prop="sort" label="排序">
          </el-table-column>
          <el-table-column label="操作">
            <!--scope定义的一个变量名, 里面包含当前行的信息
            scope.$index得到当前行的下标
            scope.row 得到当前行对应数组里面的对象
            -->
            <template slot-scope="scope">
              <el-button
                      size="mini"
                      type="info"
                      @click="albumDetail(scope.$index, scope.row)">详情</el-button>
              <el-button
                      size="mini"
                      type="success"
                      @click="albumUpdate(scope.$index, scope.row)">修改</el-button>
              <el-button
                      size="mini"
                      type="danger"
                      @click="albumDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--相册表格结束-->
        <!--图片表格开始-->
        <el-table v-if="currentIndex=='2-1'"
                  :data="pictureArr"
                  style="width: 100%">
          <el-table-column type="index" label="编号"></el-table-column>
          <!--prop=property属性 设置当前列显示的文本内容为对象的xxx属性-->
          <el-table-column label="图片" width="300">
            <template slot-scope="scope">
              <img :src="scope.row.url" width="100%">
            </template>
          </el-table-column>
          <el-table-column prop="oldName" label="原始文件名">
          </el-table-column>
          <el-table-column prop="sysName" label="系统文件名">
          </el-table-column>
          <el-table-column prop="type" label="类型">
          </el-table-column>
          <el-table-column prop="description" label="图片描述">
          </el-table-column>
          <el-table-column label="操作">
            <!--scope定义的一个变量名, 里面包含当前行的信息
            scope.$index得到当前行的下标
            scope.row 得到当前行对应数组里面的对象
            -->
            <template slot-scope="scope">
              <el-button
                      size="mini"
                      type="success"
                      @click="pictureUpdate(scope.$index, scope.row)">修改</el-button>
              <el-button
                      size="mini"
                      type="danger"
                      @click="pictureDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--图片表格结束-->

      </el-main>
    </el-container>
  </el-container>
</div>
</body>
<!--引入axios和vue框架文件-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
  let v = new Vue({
    el: '#app',
    data: function () {
      return {
        currentIndex:"1-1",
        albumArr:[],
        pictureArr:[]
      }
    },
    methods:{
      pictureUpdate(i,b){
        //跳转到修改图片页面
        location.href="/updatePicture.html?id="+b.id;
      },
      albumDetail(i,c){
        //跳转到修改相册页面
        location.href="/albumDetail.html?albumId="+c.id;
      },
      albumUpdate(i,c){
        //跳转到修改相册页面
        location.href="/updateAlbum.html?id="+c.id;
      },
      albumDelete(i,c){
        if (confirm("您确认删除此相册吗?")){
          //发出删除分类数据请求
          axios.get("/albums/delete?albumId="+c.id).then(function (response) {
            console.log(response.data.code)
            if(response.data.code == 50001){
              v.$message.error(response.data.data);
              return;
            }
            v.albumArr.splice(i,1);
            v.$message.success("成功删除"+c.name+"分类!");
          })
        }
      },
      pictureDelete(i,b){
        if (confirm("您确认删除此图片吗?")){
          axios.get("/picture/delete?pictureId="+b.id).then(function () {
            v.pictureArr.splice(i,1);
            v.$message.success("删除成功!");
          })
        }
      },
      handleSelect(key,keyPath){
        //记录当前用户点击的导航菜单的位置
        if (key=='1-2'){
          location.href="insertAlbum.html";
        }else if(key=='2-2'){
          location.href="insertPicture.html";
        }else{
          v.currentIndex = key;
        }

      }
    },
    created:function () {
      //发请求获取所有相册的信息
      axios.get("/albums/list").then(function (response) {
        v.albumArr = response.data.data;
        console.log(response.data.data)
      })
      //发请求获取所有图片的信息
      axios.get("/picture/list").then(function (response) {
        v.pictureArr = response.data.data;
        console.log(response.data.data)
      })
    }
  })
</script>
</html>